<template>
	<view class="ff-grid" :style="styles">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "ff-grid",
		components: {},
		props: {
			columns: {
				type: String,
				default: 'repeat(4, 1fr)'
			},
			border: {
				type: String,
				default: 'var(--ff-border)'
			},
			containerBorder: {
				type: String,
				default: 'unset'
			},
			containerBorderRadius: {
				type: String,
				default: 'var(--ff-small-border-radius)'
			},
			bgColor: {
				type: String,
				default: 'var(--ff-container-background)'
			},
		},
		data() {
			return {

			};
		},
		watch: {
			'props.border'(newValue, oldValue) {
				this.$set(this.$ff.config.props['ff-grid-item'], 'border', this.border)
			},
		},
		computed: {
			styles() {
				let styles = {
					'border': this.containerBorder,
					'border-radius': this.containerBorderRadius,
					'background-color': this.bgColor,
					'grid-template-columns': this.columns,
				}
				return styles
			},
		},
		created() {
			this.$set(this.$ff.config.props, 'ff-grid-item', {
				border: this.border,
			})
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	@import "../../librarys/css/components.css";

	.ff-grid {
		display: grid;
		overflow: hidden;
	}
</style>